;(function (Vue) {
	const todos=[
		{
			id:1,
			title:'吃饭',
			completed:false,
		},
		{
			id:2,
			title:'睡觉',
			completed:false,
		},
		{
			id:3,
			title:'打豆豆',
			completed:true,
		},
	]

	Vue.directive('focus',{
		inserted:function(el){
			el.focus()
			console.log(el)
		}
	})
	window.app=new Vue({
		el:'#todoapp',
		data:{
			todos,
			// leftCount:this.todos.filter(item => !item.completed).length
			currentEditing: null,
			filterStat: 'all',
			toggleAllStat:true

		},
		//计算属性会缓存，依赖于内部data中的数据，如果数据没变，不会重新执行；方法不会缓存，多次使用则会重复执行。
		computed:{
			leftCount: function(){
				return	this.todos.filter(item => !item.completed).length
			},
			filterTodos: function(){
				switch(this.filterStat){
					case 'active':
					return this.todos.filter(item => !item.completed)
					break
					case 'completed':
					return this.todos.filter(item => item.completed)
					break
					default:
					return this.todos
					break
				}
			},

			//使用计算属性的方式去处理全选的联动效果
			toggleStat: function () {
				return this.todos.every(item => item.completed)
			}
		},
		methods:{
			//ES6 对象属性函数简写
			//等价于 addTodo:function(){}
			addTodo(event){
				//1.获取用户输入
				//2.判断数据是否非空
				//		如果是空不动作
				//		不是时空添加到数组中
				//3.清空文本框
				//console.log(event.target.value)
				var todoText=event.target.value.trim()
				if(!todoText.length){
					return
				} 
				var id=this.todos[this.todos.length - 1].id+1
				this.todos.push({
					id,
					title:todoText,
					completed:false,
				})
				//清空文本框
				event.target.value = ''
			},
			toggleAll(event){
				//获取点击的chenkbox的选中状态
				var checked = event.target.checked
				//遍历数组的中的所有元素，把每个元素的completed状态都设置为
				this.todos.forEach(todo => todo.completed = checked)
			},
			//删除任务
			removeTodo(delIndex,event){
				this.todos.splice(delIndex,1)
			},
			//删除所有已完成的
			removeAllDone(){
				
				// this.todos.forEach((item,index) =>{
				// 	if(item.completed){
				// 		console.log(item.title)
				// 		this.todos.splice(index,1)
				// 	}
				// })
				//把所有需要保留的数据过滤出来，然后重新赋值给 todos
				this.todos  = this.todos.filter(item => !item.completed)
				//如果想要在遍历的过程中删除，则可以使用for循环
				// for (let i = 0;i < this.todos.length;i++){
				// 	if (this.todos[i].completed) {
				// 		this.todos.splice(i,1)
				// 		i--
				// 	}
				// }
				
			},
 
			//方法也可以用于模板绑定
			// getLeftCount(){
			// 	return	this.todos.filter(item => !item.completed).length
			// }

			//双击label获得双击样式
			// geiEditing(){
			// 	console.log("点击事件")
			// },

			//保存编辑项
			saveEdit(item, index, event) {
				//1.拿到文本框中的数据
				var editText = event.target.value.trim()

				//使用三元表达式简写
				// !editText.length? this.todos.splice(index,1):item.title = editText
				if(!editText.length) {
					//将元素直接从数组移除
					return this.todos.splice(index,1)
				}

				//2.将数据设置到任务项中
				item.title = editText

								
				//3.去除 editing 样式
				this.currentEditing = null
			},

			//状态切换
			toggle(item,event) {
				// every
				// some
				// 		只要有一个未选中，则让 全选按钮 不选中
				//		否则，则让 全选按钮 选中
				//console.log(item.completed)//false
				//声明周期，模板更新的问题
				//这里的解决方案就是把你的代码放到 Vue.nextTick() 的回调函数中
				Vue.nextTick(() => {
					this.toggleAllStat = this.todos.every(item => item.completed)
				})
			}
		}
	})


	window.onhashchange = function () {
		//得到点击的路由 hash
		 var hash = window.location.hash.substr(2)||'all'

		 //设置到程序中的过滤状态
		 //  过滤状态一旦改变，则计算属性会感知到这个 filterStat变了
		 //  当它感知到 filterStat 变了之后，就会重新计算执行
		 //  当 filterStat 重新计算执行之后，数据得到了更新，则自动同步更新到视图中
		 window.app.filterStat = hash
	}	


	//页面第一次进来，执行一次
	window.onhashchange()

})(Vue);
